<template>
	<!-- 搜索 -->
	<view>
		<NavbarHead :toTop="true" backColor="#000" bgColor="rgba(0,0,0,0)"></NavbarHead>
		<view class="searchBox">
			<view class="search">
				<image src="/static/images/index/search.png" style="margin-right: 10rpx;" mode="">
				</image>
				<input class="ipt" type="text" placeholder="搜索" v-model="searchVal" :focus="focusState"
					@blur="focusState = false" @confirm="$u.debounce(subSearch, 500)">
				<image v-if="searchVal !== ''" src="http://qiniu.suboshimuying.cn/static/search/ic-clear-true@2x.png"
					mode="" @click.stop="imgClick">
				</image>
			</view>
		</view>

		<template v-if="historyShow">
			<view class="history">
				<text class="history-title">历史搜索</text>
				<image src="http://qiniu.suboshimuying.cn/static/search/delete.png" @click="popupShow=true">
				</image>
			</view>
			<view class="historyList">
				<text v-for="(item,index) in historyList" :key="item.val">{{item.keyword}}</text>
			</view>
		</template>

		<template v-if="searchShow">
			<view class="showBox">
				<image src="http://qiniu.suboshimuying.cn/static/search/blank钱@2x.png" mode=""></image>
				<view style="width: 100%; margin-top: 32rpx;">
					没有找到该内容
				</view>
				<view style="width: 100%;margin-top: 12rpx;color: #B3B3B3;">
					换个搜索词试试吧
				</view>
			</view>
		</template>
		<!-- 瀑布流 -->
		<template v-else>
			<view class="listBox">
				<custom-waterfalls-flow v-if="goodsList.length" ref="waterfallsFlowRef" :columnSpace="1.5"
					:value="goodsList" @wapperClick="itemClick" @imageClick="itemClick">
					<view class="itemBox" v-for="(item,index) in goodsList" :key="index" slot="slot{{index}}">

						<view class="itemBox-name u-line-2">
							{{item.name}}
						</view>
						<template v-if="item.one_category_id ===1">
							<view class="itemBox-price">
								某宝参考价:¥{{item.mb_price}}
							</view>
							<view class="itemBox-price">
								某东参考价:¥{{item.md_price}}
							</view>
						</template>

						<view class="itemBox-addCart">
							<view class="left">
								<view style="color: #333;">
									<text>¥</text>
									<text style="font-size: 28rpx;">{{item.price}}</text>
									<!-- <text
										style="color: rgba(0,0,0,0.26);margin-left: 10rpx;">¥{{item.order_price}}</text> -->
								</view>
								<view style="color: #B3B3B3;">
									{{item.pay_num}}人付款
								</view>
							</view>
							<template v-if="item.one_category_id===1 ||item.one_category_id===4">
								<view class="right" @click.stop="addCart(item.id)">
									<image src="http://qiniu.suboshimuying.cn/static/home/ic-shopping-cart@2x.png"
										mode="">
									</image>
								</view>
							</template>
						</view>
					</view>
				</custom-waterfalls-flow>
			</view>
		</template>
		<MessageBox text="确认删除全部历史记录?" :showFlag="popupShow" @popupClose="popupShow=false" @MesBoxCallback="callback" />
	</view>
</template>

<script>
	import NavbarHead from '@/components/NavbarHead/NavbarHead.vue'
	import MessageBox from '@/components/MessageBox/MessageBox.vue'
	export default {
		data() {
			return {
				searchVal: "",
				focusState: true, // 默认获取焦点
				searchShow: false, //未搜索到结果
				historyShow: true, //历史记录
				goodsList: [], //商品列表
				historyList: [], //历史记录列表
				last_page: null, // 总页数
				page: 1, //当前页
				popupShow: false, //弹出层
			};
		},
		components: {
			NavbarHead,
			MessageBox
		},
		onLoad() {
			this.$nextTick(() => {
				this.focusState = true
			})
			this.getrecordSer()
		},
		async onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				let res = await this.$api.search({
					keyword: this.searchVal,
					total: 8,
					page: this.page,
				})
				this.goodsList.push(...res.data.data)
			} else {
				this.$u.toast('已经到底了！')
			}
		},
		methods: {
			// item点击跳转
			itemClick(e) {
				uni.navigateTo({
					url: `/subPages/goodDetails/goodDetails?type=${e.one_category_id}&id=${e.id}`
				})
				// console.log(e);
			},
			// 清除内容
			imgClick() {
				this.searchVal = ""
			},
			// 弹出层回调
			async callback() {
				let {
					code,
					msg
				} = await this.$api.delrecordSer()
				this.$u.toast(msg)
				this.popupShow = false
				setTimeout(() => {
					this.getrecordSer()
				}, 1000)
			},
			// 搜索
			async subSearch() {
				let keyword = this.searchVal.replace(/\s+/g, "") //去除所有空格
				this.page = 1
				this.goodsList = []
				let res = await this.$api.search({
					keyword: this.searchVal,
					total: 8,
					page: 1,
				})
				this.goodsList = res.data.data
				this.last_page = res.data.last_page
				this.historyShow = false
				if (res.data.data.length === 0) this.searchShow = true
				else this.searchShow = false
				// console.log(res);
			},
			// 添加到购物车点击
			async addCart(id) {
				let {
					msg
				} = await this.$api.addCart({
					goods_id: id,
					num: 1
				})
				this.$u.toast(msg)
			},
			//搜索记录
			async getrecordSer() {
				let res = await this.$api.getrecordSer()
				this.historyList = res.data
			}
		}
	}
</script>
<style>
	page {
		box-sizing: border-box;
		padding: 0 24rpx 100rpx;
	}
</style>

<style lang="scss" scoped>
	.searchBox {
		box-sizing: border-box;
		padding: 0 24rpx;
		width: 100%;
		height: 84rpx;
		line-height: 84rpx;
		border-radius: 60rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		// border: 2px solid #FFD1D6;
		border: 1px solid #e3e3e3;
		border-radius: 99px;
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;

		color: rgba(0, 0, 0, 0.8);
		font-size: 28rpx;
		font-weight: 1000;
		font-family: "PingFang SC";
		text-align: left;
		letter-spacing: 0.6rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.search {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				vertical-align: middle;
			}

			.ipt {
				display: inline-block;
				flex: 1;
			}
		}


	}

	.history {
		margin-top: 38rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 70rpx;

		&-title {
			color: rgba(0, 0, 0, 0.8);
			font-size: 28rpx;
			font-weight: 500;
			font-family: "PingFang SC";
			text-align: left;
			line-height: 40rpx;
			letter-spacing: 0.6rpx;
		}

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.historyList {
		margin-top: 16rpx;

		text {
			display: inline-block;
			box-sizing: border-box;
			padding: 10rpx 16rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			color: rgba(0, 0, 0, 0.8);
			font-size: 24rpx;
			font-weight: 400;
			line-height: 32rpx;
			letter-spacing: 0.6rpx;
			margin: 0 16rpx 12rpx 0;
			transition: all .5s;
		}


	}

	.listBox {
		margin-top: 18rpx;
		box-sizing: border-box;
		width: 100%;
	}

	.itemBox {
		width: 344rpx;
		border-radius: 24rpx;
		overflow: hidden;
		background: rgba(255, 255, 255, 1);
		padding-bottom: 20rpx;
		box-sizing: border-box;
		margin-bottom: 14rpx;

		&-name {
			box-sizing: border-box;
			padding: 0 20rpx;
			margin-top: 20rpx;
			width: 100%;
			// height: 80rpx;
			color: rgba(0, 0, 0, 0.8);
			font-size: 26rpx;
			font-weight: 500;
		}

		&-price {
			box-sizing: border-box;
			padding: 0 20rpx;
			margin-top: 8rpx;
			height: 28rpx;
			line-height: 28rpx;
			color: rgba(0, 0, 0, 0.4);
			font-size: 22rpx;
			font-weight: 400;
		}

		&-addCart {
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 20rpx;

			.left {
				color: $textColor;
				font-size: 22rpx;
				font-weight: 400;
				font-family: "PingFang SC";
				text-align: left;
			}

			.right {
				image {
					width: 40rpx;
					height: 40rpx;
					// background-color: $boxBg;
					border-radius: 50%;
				}
			}
		}
	}

	.showBox {
		margin-top: 200rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		color: rgba(0, 0, 0, 0.8);
		font-size: 28rpx;
		font-weight: 400;
		text-align: center;

		image {
			width: 320rpx;
			height: 320rpx;
			opacity: 1;
		}


	}
</style>